<template>
 <div style="width: 100%; height: 500px; background-color: #fff">
  <el-form :model="page" label-width="auto" style="max-width: 1400px;">
    <el-form-item >
      <el-input style="margin-top: 20px;margin-left: 200px;width: 400px;" placeholder="请输入企业全称" v-model="page.EnterpriseName" />
      <el-button type="info" style="float: right;margin-top: 20px;margin-left: 300px" @click="GetData" 
      :icon="Search">查询</el-button>
      <el-button style="float: right;margin-top: 20px;margin-left: 20px" @click="dialogFormVisible = true" 
      :icon="Edit" type="primary">新增</el-button>
    </el-form-item>
      
    </el-form>

  <el-table :data="tableData" style="width: 100%;height: 300px;">
    <el-table-column prop="enterpriseId" label="序号" width="180" />
    <el-table-column prop="enterpriseName" label="企业名称" width="180" />
    <el-table-column prop="address" label="注册地址" />
    <el-table-column prop="legalRepresentative" label="法定代表人" width="180" />
    <el-table-column prop="phone" label="联系电话" width="180" />
    <el-table-column prop="email" label="电子邮件" />
    <el-table-column prop="establishmentDate" label="成立日期" width="180">
      <template #default="{row}">
        {{ moment(row.establishmentDate).format("YYYY-MM-DD") }}

      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="企业新增" width="500">
    <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="企业全称" prop="enterpriseName">
      <el-input v-model="ruleForm.enterpriseName" />
    </el-form-item>
    <el-form-item label="企业简称" prop="enterpriseAbbreviation">
      <el-input v-model="ruleForm.enterpriseAbbreviation" />
    </el-form-item>
    <el-form-item label="注册地址" prop="address">
      <el-input v-model="ruleForm.address" />
    </el-form-item>
    <el-form-item label="法定代表人" prop="legalRepresentative">
      <el-input v-model="ruleForm.legalRepresentative" />
    </el-form-item>
    <el-form-item label="联系电话" prop="phone">
      <el-input v-model="ruleForm.phone" />
    </el-form-item>
    <el-form-item label="电子邮件" prop="email">
      <el-input v-model="ruleForm.email" />
    </el-form-item>
    <el-form-item label="成立日期" prop="establishmentDate">
      <el-date-picker
        v-model="ruleForm.establishmentDate"
        type="date"
        placeholder="请选择"
        format="YYYY/MM/DD"
      />
    </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="Add">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div>
      <el-pagination
        v-model:current-page="page.pageIndex"
        v-model:page-size="page.pageSize"
        layout="prev, pager, next"
        :total="page.totalCount"
        class="mt-4"
        @current-change="handleCurrentChange"
        style="float: right"
      />
      <span style="float: right; margin-top: 4px"
        >共{{ page.totalCount }}条</span
      >
    </div>

 </div>
</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";
import axios from 'axios'
import moment from 'moment';
const dialogFormVisible = ref(false)
const apiurl = import.meta.env.VITE_APP_API_URL_EnterpriseShow;
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
const apiurl1 = import.meta.env.VITE_APP_API_URL_EnterpriseAdd;
interface RuleForm {
  enterpriseId: number,
  enterpriseName: string
  enterpriseAbbreviation: string
  address: string
  legalRepresentative: string
  phone: string
  email: string
  establishmentDate: string
  pId: number
  isDelete: boolean
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  enterpriseId: 0,
  enterpriseName: "",
  enterpriseAbbreviation: "",
  address: "",
  legalRepresentative: "",
  phone: "",
  email: "",
  establishmentDate:"",
  pId: 0,
  isDelete: false
})

const page=reactive({
  EnterpriseName:'',
  pageIndex:1,
  pageSize:10,
  totalCount:0,
  totalPage:0
})

//定义数组 存储数据
const tableData =ref([])
//显示
const GetData=()=>{
axios.post(apiurl+'/api/Basis/QueryEnterprise',{
  EnterpriseName:page.EnterpriseName,
  pageIndex:page.pageIndex,
  pageSize:page.pageSize
})
.then((res)=>{
  console.log(res)
  tableData.value=res.data.data.list
  page.totalCount=res.data.data.totalCount
  page.totalPage=res.data.data.totalPage
})
.catch((err)=>{
  console.log(err)
})
}

//钩子函数
onMounted(()=>{
  GetData()
})


//分页
const handleSizeChange = (val: number) => {
  page.pageSize = val;
  page.pageIndex=1;//页容量发生编号当前页面为首页
  GetData();
};
const handleCurrentChange = (val: number) => {
  page.pageIndex = val;
  GetData();
};

//表单验证
const rules = reactive<FormRules<RuleForm>>({
  enterpriseName: [
    { required: true, message: '请输入企业全称', trigger: 'blur' },
  ],
  enterpriseAbbreviation: [
    { required: true, message: '请输入企业简称', trigger: 'blur' },
  ],
  address: [
    { required: true, message: '请输入注册地址', trigger: 'blur' },
  ],
  legalRepresentative: [
    { required: true, message: '请输入法定代表人', trigger: 'blur' },
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '请输入电子邮件', trigger: 'blur' },
  ],
  establishmentDate: [
    { required: true, message: '请选择成立日期', trigger: 'blur' },
  ],
})

//新增
const Add=()=>{
  axios.post(apiurl1+'/api/Basic/AddEnterprise',ruleForm)
     .then(res=>{
      console.log(res)
      ElMessage.success('添加成功')
      dialogFormVisible.value = false
      GetData()
     }
    )
     
}
</script>